<!-- views/purchase/components/SupplierOperationDialog.vue -->
<template>
  <el-dialog
    :model-value="visible"
    :title="dialogTitle"
    width="600px"
    :before-close="handleClose"
    @update:modelValue="(val: boolean) => emit('update:modelValue', val)"
  >
    <el-form 
      :model="form" 
      :rules="rules" 
      ref="formRef" 
      label-width="100px"
      @submit.prevent="handleSubmit"
    >
      <el-form-item label="供应商名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入供应商名称" />
      </el-form-item>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="联系人" prop="contactPerson">
            <el-input v-model="form.contactPerson" placeholder="请输入联系人" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入联系电话" />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email" placeholder="请输入邮箱" />
      </el-form-item>
      
      <el-form-item label="地址" prop="address">
        <el-input v-model="form.address" type="textarea" placeholder="请输入地址" />
      </el-form-item>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <el-select v-model="form.status" placeholder="请选择状态" style="width: 100%">
              <el-option label="待审核" value="pending" />
              <el-option label="合作中" value="active" />
              <el-option label="已暂停" value="suspended" />
              <el-option label="已终止" value="terminated" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="评分" prop="rating">
            <el-rate
              v-model="form.rating"
              :max="5"
              allow-half
            />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-form-item label="合作时间" prop="cooperationDate">
        <el-date-picker
          v-model="form.cooperationDate"
          type="date"
          placeholder="请选择合作开始时间"
          style="width: 100%"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="submitting">
        {{ editingSupplier ? '更新' : '保存' }}
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch, defineProps, defineEmits } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'

interface Supplier {
  id: number
  name: string
  contactPerson: string
  phone: string
  email: string
  address: string
  status: string
  rating: number
  cooperationDate: string
  remark: string
}

const props = defineProps<{
  modelValue: boolean
  editingSupplier: Supplier | null
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'submit', form: any): void
  (e: 'close'): void
}>()

const visible = computed({
  get: () => props.modelValue,
  set: (value: boolean) => emit('update:modelValue', value)
})

const formRef = ref<FormInstance>()
const submitting = ref(false)

const form = ref({
  name: '',
  contactPerson: '',
  phone: '',
  email: '',
  address: '',
  status: 'pending',
  rating: 0,
  cooperationDate: '',
  remark: ''
})

const dialogTitle = computed(() => {
  return props.editingSupplier ? '编辑供应商' : '新增供应商'
})

const rules = ref<FormRules>({
  name: [
    { required: true, message: '请输入供应商名称', trigger: 'blur' }
  ],
  contactPerson: [
    { required: true, message: '请输入联系人', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' }
  ],
  email: [
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ]
})

// 监听编辑项变化
watch(() => props.editingSupplier, (newVal) => {
  if (newVal) {
    form.value = { ...newVal }
  } else {
    form.value = {
      name: '',
      contactPerson: '',
      phone: '',
      email: '',
      address: '',
      status: 'pending',
      rating: 0,
      cooperationDate: '',
      remark: ''
    }
  }
}, { immediate: true })

const handleClose = () => {
  visible.value = false
  emit('close')
}

const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    submitting.value = true
    // 发出提交事件，但不立即关闭对话框
    emit('submit', { ...form.value })
  } catch (error) {
    ElMessage.error(`${props.editingSupplier ? '更新' : '保存'}失败: ${(error as Error).message}`)
  } finally {
    submitting.value = false
  }
}
</script>

<style scoped>
.el-form-item {
  margin-bottom: 18px;
}
</style>